<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>查看设备</title>
	<meta name="renderer" content="webkit">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
	<meta name="apple-mobile-web-app-status-bar-style" content="black">
	<meta name="apple-mobile-web-app-capable" content="yes">
	<meta name="format-detection" content="telephone=no">
	<link rel="stylesheet" href="../../layui/css/layui.css" media="all" />
	<link rel="stylesheet" href="../../css/public.css" media="all" />
	<link rel="stylesheet" href="../../css/leftnav.css" media="all" />
	<style type="text/css">
		body,ul,dl,dd,dt,ol,li,p,h1,h2,h3,h4,h5,h6,form,fieldset,table,img,td,div,input{margin:0;padding:0;}
		ul,ol,li{list-style-type:none; line-height:24px;}
		h1,h2,h3,h4,h5,h6{font-size:12px; font-weight:normal}
		.hidden{display:none;}
		a{outline-style:none;color:#0e0e0e;text-decoration:none;}
		a:hover{color:#b21600; text-decoration:none;}
		.clear{ clear:both; height:0px; overflow:hidden}
		input{ padding-left:2px; font-size:12px}
		img{ border:0px;}
		.fl{ float:left}
		.fr{ float:right}
		.mr_div{ width:580px; height:160px; background:#EDEDED; padding:12px 17px 0 13px; margin-bottom:15px}
		.mrd_h1{ height:22px; margin-bottom:18px; display:block}
		.mrd_h1 .fl{ line-height:22px; color:#4f4f4f; font-size:16px}
		.mrd_h1 .fr{ padding-top:9px}
		.mrd_nr{ height:200px}
		.mrd_bl,.mrd_br{ width:16px; height:27px; position:relative; top:60px; cursor:pointer}
		.mrd_pic{ width:900px; height:150px; float:left; overflow:hidden; position:relative; margin-left:17px; display:inline}
		.mrd_ul{ position:absolute; left:0px; top:0px;}
		.mrd_ul li{ width:150px; height:150px; float:left;background:#46b6ff; overflow:hidden; margin-right:14px; display:inline; position:relative}
		.mrd_ul li span{ display:block; font-size:12px; font-weight:bold;text-align: center;color:#fff}
		.mrd_si{ position:absolute; left:25px; top:25px}
		.mrd_si,.mrd_si img{ width:100px; height:100px;top:25px}
		.mrd_st{ width:100px; height:34px; line-height:34px; position:absolute; left:0px; top:69px; background:#000; text-align:center; opacity:0.8; filter:alpha(opacity=80);}
		.mrd_st a,.mrd_st a:hover{ color:#FFF}
		.mr_div2 .mrd_st{ background:#CC0000}
		.mright { margin: 0px auto; width: 675px; }
	</style>
</head>
<body class="childrenBody">
<div >
	<form class="layui-form " action="" method="post" >
		<div class="layui-form-item">
			<label  class="layui-form-label" style="width: 130px;" id="ltbuildclass"></label>
		</div>
		<div class="layui-form-item">
			<div class="layui-col-md1"><img src="../../images/温度.png"></div>
			<div class="layui-col-md1">
				<div>
					<div id="CurrentTemperature" style="color:#46b6ff;font-size:small;padding-top:10px;">25</div>&#8451;
					<div >室内温度</div>
				</div>
			</div>

			<div class="layui-col-md1"><img src="../../images/湿度.png"></div>
			<div class="layui-col-md1">
				<div>
					<div id="CurrentHumidity" style="color:#46b6ff;font-size:small;padding-top:10px;">44</div>%
					<div >室内湿度</div>
				</div>
			</div>

			<div class="layui-col-md1"><img src="../../images/pm25.png"></div>
			<div class="layui-col-md1">
				<div>
					<div id="PM25" style="color:#46b6ff;font-size:small;padding-top:10px;">25</div>ug/m<sup>3</sup>
					<div >PM2.5</div>
				</div>
			</div>

			<div class="layui-col-md1"><img src="../../images/co2.png"></div>
			<div class="layui-col-md1">
				<div>
					<div id="CO2" style="color:#46b6ff;font-size:small;padding-top:10px;">1359</div>ppm
					<div >二氧化碳</div>
				</div>
			</div>

			<div class="layui-col-md1"><img src="../../images/甲醛.png"></div>
			<div class="layui-col-md1">
				<div>
					<div id="HCHO" style="color:#46b6ff;font-size:small;padding-top:10px;">0.001</div>ppm
					<div >甲醛</div>
				</div>
			</div>
		</div>
	</form>
</div>
<div>
	<form class="layui-form " method="post" >
		<div class="mrd_nr"  >
			<div class="fl mrd_bl" onclick="upMove(this);return false"><img src="images/but_l.jpg" /></div>
			<div class="mrd_pic">
				<ul class="mrd_ul">
					<li id="classMode">
						<span>上课模式</span>
						<span class="mrd_si"><img src="../../images/上课0.png" /></span>
						<span style="position:absolute; left:30px; top:125px">幕布开，空调开</span>
					</li>
					<li id="finishClassMode">
						<span>下课模式</span>
						<span class="mrd_si"><img src="../../images/下课1.png" /></span>
						<span style="position:absolute; left:30px; top:125px">幕布关，空调关</span>
					</li>
					<li id="manualMode">
						<span >手动模式</span>
						<span class="mrd_si"><img src="../../images/手动0.png" /></span>
						<span style="position:absolute; left:30px; top:125px">幕布关，空调关</span>
					</li>
				</ul>
			</div>
			<div class="fr mrd_br" onclick="downMove(this);return false"><img src="images/but_r.jpg" /></div>
		</div>
	</form>
</div>

<div>
	<form action="" method="post" class="layui-form" id="dataFrm3" lay-filter="dataFrm3">
		<div>
			<ul class="layer-photos-demo" id="Images"></ul>
		</div>
	</form>
</div>
<script type="text/javascript" src="../../layui/layui.js"></script>
<script type="text/javascript" src="deviceDetail.js"></script>
<script type="text/javascript" src="../../js/jquery-1.4.2.min.js"></script>
<script language="javascript">
	// JavaScript Document
	function upMove(obj){
		var dom = $(obj).next();
		dom.find("ul").width(dom.find("li").size()*176);
		dom.animate({
			scrollLeft:-176+dom.scrollLeft()
		},500)
		if(dom.scrollLeft()>0){
			dom.next().find("img").attr("src","images/but_r2.jpg");
		}
		if(dom.scrollLeft()<352){
			dom.prev().find("img").attr("src","images/but_l.jpg");
		}
	}
	function downMove(obj){
		var dom = $(obj).prev();
		dom.find("ul").width(dom.find("li").size()*176);
		dom.animate({
			scrollLeft:176+dom.scrollLeft()
		},500)
		if(dom.scrollLeft()>-176){
			dom.prev().find("img").attr("src","images/but_l2.jpg");
		}
		if(dom.scrollLeft()>=(dom.find("li").size()*176)-704){
			dom.next().find("img").attr("src","images/but_r.jpg");
		}
	}
	//判断是否需要滚动
	$(function(){
		for(i=0; i<=$(".mrd_pic").size(); i++){
			if($(".mrd_pic").eq(i).find("li").size()>4){
				$(".mrd_pic").eq(i).next().find("img").attr("src","images/but_r2.jpg");
			}
		}
	})
</script>
</body>
</html>